<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/materialdesignicons.min.css">
    <title>Document</title>
    <style>
        .div10 {
            width: 100%;
            height: 270px;
            background-color: #f5b504;
        }

        .diva {
            margin: 0 10px;
        }

        .divc {
            width: 93%;
            height: 100%;
            background-color:#eee;
            margin: 0 10px;
            border-radius: 20px;
        }

        .div1 {
            width: 100%;
            height: 50px;
            background-color: #f5b504;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .div1 img {
            width: 30px;
            height: 30px;
            border-radius: 20px;
        }

        .div1 .a {
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
            margin: 0 10px;
        }

        .div1 .a1 {
            font-size: 13px;
            /* align-items: center; */
        }

        .div1 .a2 {
            font-size: 1px;
        }

        .div1 .b {
            flex: 1;
            background-color: white;
            border-radius: 5px;
            font-size: 12px;
            /* text-align: center; */
        }

        .div1 .b .mdi {
            margin-left: 10px;
            color: #999;
            font-size: 20px;
        }

        div .c {
            font-size: 20px;
            margin: 0 10px;
        }

        div .d {
            font-size: 25px;
            /* margin: 0 10px; */
        }

        .div2 {
            width: 100%;
            height: 20px;
            /* background-color:#f5b504 ; */
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 5px;
            /* margin: 0 10px; */
        }

        .divb {
            margin: 0 30px;
        }

        .div3 {
            width: 100%;
            height: 100px;
            display: flex;
            justify-content: space-between;
            /* flex-direction: column; */
            align-items: center;

        }

        .div3 .mdi {
            font-size: 30px;
        }

        .div3 .a {
            font-size: 10px;
        }

        .div3 .b {
            display: flex;
            justify-content: space-between;
        }

        .div4 {
            width: 100%;
            height: 60px;
            /* background-color: white; */
            padding-top: 10px;
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
        }

        .div4 img {
            width: 40px;
            height: 40px;
            border-radius: 10px;
        }

        .div4 .a {
            display: flex;
            justify-content: space-between;
            flex-direction: column;
        }

        .div4 .b {
            font-size: 10px;
        }

        .div5 {
            width: 100%;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }

        .div5 .mdi {
            font-size: 20px;

        }

        .div5 .c {
            width: 13%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-direction: column;
            font-size: 10px;
            margin-bottom: 10px;
        }

        .div6 img {
            width: 100%;
            height: 100px;
            border-radius: 10px;
            
        }

        .div7 {
           
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }

        .div7 .a {
            margin-top: 5px;
            width: 47%;
            height: 200px;
            /* background-color: rosybrown; */
            border-radius: 5px;
        }

        .div7 .b {
            font-size: 11px;
            font-weight: bold;
            margin-bottom: 5px;
            margin-top: 5px;
        }

        .div7 .c {
            display: flex;
            margin-bottom: 5px;
        }

        .div7 .d {
            font-size: 5px;
            color: #666;
        }

        .div7 .e {
            color: red;
            font-size: 5px;
        }

        .div7 img {
            width: 100%;
            height: 90px;
            border-radius: 5px;
        }
    </style>
</head>

<body>
    <div class="div10">
        <div class="diva">
            <div class="div1">
                <img
                    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584594301846&di=c1863de7f0295e775c5502bf4cfd6ab5&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F01%2F48%2F90%2F655744466b77df5.jpg">
                <div class="a">
                    <div class="a1">深圳</div>
                    <div class="a2">多云 21℃</div>
                </div>
                <div class="b">
                    <span class="mdi mdi-magnify"></span>喜茶
                </div>
                <div class="c">
                    <span class="mdi mdi-microphone"></span>
                </div>
                <div class="d">
                    <span class="mdi mdi-plus"></span>
                </div>
            </div>
        </div>
        <div class="diva">
            <div class="div2">
                <div>热搜： 口腔</div>
                <div>|</div>
                <div>魔王猪蹄</div>
                <div>|</div>
                <div>较场尾</div>
                <div>|</div>
                <div>婚纱照</div>
                <div>|</div>
                <div>快餐</div>
                <div>|</div>
                <div>健身</div>
            </div>
        </div>
        <div class="divb">
            <div class="div3">
                <div>
                    <div class="b">
                        <span class="mdi mdi-credit-card-scan-outline"></span></div>
                    <div class="a">扫一扫</div>
                </div>
                <div>
                    <div class="b">
                        <span class="mdi mdi-credit-card-scan-outline"></span></div>
                    <div class="a">扫一扫</div>
                </div>
                <div>
                    <div class="b">
                        <span class="mdi mdi-credit-card-scan-outline"></span></div>
                    <div class="a">扫一扫</div>
                </div>
                <div>
                    <div class="b">
                        <span class="mdi mdi-credit-card-scan-outline"></span></div>
                    <div class="a">扫一扫</div>
                </div>
            </div>
        </div>
        <div class="divc">
            <div class="diva">
                <div class="div4">
                    <div class="a">
                        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584598144276&di=8268baa57ce85dd04ede4e3e30a28401&imgtype=0&src=http%3A%2F%2F0.pic.pc6.com%2Fthumb%2Fup%2F2015-11%2F2015111814572_160_160.png"
                            alt="">
                        <div class="b">外卖</div>
                    </div>
                    <div class="a">
                        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584598144276&di=8268baa57ce85dd04ede4e3e30a28401&imgtype=0&src=http%3A%2F%2F0.pic.pc6.com%2Fthumb%2Fup%2F2015-11%2F2015111814572_160_160.png"
                            alt="">
                        <div class="b">外卖</div>
                    </div>
                    <div class="a">
                        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584598144276&di=8268baa57ce85dd04ede4e3e30a28401&imgtype=0&src=http%3A%2F%2F0.pic.pc6.com%2Fthumb%2Fup%2F2015-11%2F2015111814572_160_160.png"
                            alt="">
                        <div class="b">外卖</div>
                    </div>
                    <div class="a">
                        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584598144276&di=8268baa57ce85dd04ede4e3e30a28401&imgtype=0&src=http%3A%2F%2F0.pic.pc6.com%2Fthumb%2Fup%2F2015-11%2F2015111814572_160_160.png"
                            alt="">
                        <div class="b">外卖</div>
                    </div>
                    <div class="a">
                        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584598144276&di=8268baa57ce85dd04ede4e3e30a28401&imgtype=0&src=http%3A%2F%2F0.pic.pc6.com%2Fthumb%2Fup%2F2015-11%2F2015111814572_160_160.png"
                            alt="">
                        <div class="b">外卖</div>
                    </div>
                </div>
            </div>
            <div class="div5">
                <div class="c">
                    <span class="mdi mdi-credit-card-scan-outline"></span>
                    打车
                </div>
                <div class="c">
                    <span class="mdi mdi-credit-card-scan-outline"></span>
                    打车
                </div>
                <div class="c">
                    <span class="mdi mdi-credit-card-scan-outline"></span>
                    打车
                </div>
                <div class="c">
                    <span class="mdi mdi-credit-card-scan-outline"></span>
                    打车
                </div>
                <div class="c">
                    <span class="mdi mdi-credit-card-scan-outline"></span>
                    打车
                </div>
                <div class="c">
                    <span class="mdi mdi-credit-card-scan-outline"></span>
                    打车
                </div>
                <div class="c">
                    <span class="mdi mdi-credit-card-scan-outline"></span>
                    打车
                </div>
                <div class="c">
                    <span class="mdi mdi-credit-card-scan-outline"></span>
                    打车
                </div>
                <div class="c">
                    <span class="mdi mdi-credit-card-scan-outline"></span>
                    打车
                </div>
                <div class="c">
                    <span class="mdi mdi-credit-card-scan-outline"></span>
                    打车
                </div>
            </div>
            <div class="div6">
                <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=39838980,3008580887&fm=11&gp=0.jpg"
                    alt="">
            </div>
            <div class="div7">
                <div class="a">
                    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584606058736&di=f53a188c8d1350ed7b23592dfd0e16aa&imgtype=0&src=http%3A%2F%2Fgss0.baidu.com%2F9vo3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2F37d12f2eb9389b505ee3a46a8735e5dde7116eed.jpg"
                        alt="">
                    <div class="b">动漫唯美</div>
                    <div class="c">
                        <div class="e">4.5分</div>
                        <div class="d">支持自取</div>
                    </div>
                    <div class="d">人均191 月售4764</div>
                </div>
                <div class="a">
                    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584606058736&di=f53a188c8d1350ed7b23592dfd0e16aa&imgtype=0&src=http%3A%2F%2Fgss0.baidu.com%2F9vo3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2F37d12f2eb9389b505ee3a46a8735e5dde7116eed.jpg"
                        alt="">
                    <div class="b">动漫唯美</div>
                    <div class="c">
                        <div class="e">4.5分</div>
                        <div class="d">支持自取</div>
                    </div>
                    <div class="d">人均191 月售4764</div>
                </div>
                <div class="a">
                    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584606058736&di=f53a188c8d1350ed7b23592dfd0e16aa&imgtype=0&src=http%3A%2F%2Fgss0.baidu.com%2F9vo3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2F37d12f2eb9389b505ee3a46a8735e5dde7116eed.jpg"
                        alt="">
                    <div class="b">动漫唯美</div>
                    <div class="c">
                        <div class="e">4.5分</div>
                        <div class="d">支持自取</div>
                    </div>
                    <div class="d">人均191 月售4764</div>
                </div>
                <div class="a">
                    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584606058736&di=f53a188c8d1350ed7b23592dfd0e16aa&imgtype=0&src=http%3A%2F%2Fgss0.baidu.com%2F9vo3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2F37d12f2eb9389b505ee3a46a8735e5dde7116eed.jpg"
                        alt="">
                    <div class="b">动漫唯美</div>
                    <div class="c">
                        <div class="e">4.5分</div>
                        <div class="d">支持自取</div>
                    </div>
                    <div class="d">人均191 月售4764</div>
                </div>
            </div>
        </div>

    </div>
    </div>

</body>

</html>